<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>“我们的小宇宙” App 原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
        /* 选中标签的下划线 */
        .tab-active {
            border-bottom: 3px solid #f472b6; /* Pink-400 */
            color: #1f2937; /* Gray-800 */
            font-weight: 600;
        }
        /* 隐藏滚动条 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        /* 心动按钮动画 */
        @keyframes heartbeat {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        .heartbeat-animation {
            animation: heartbeat 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
        /* “想你”提示动画 */
        @keyframes fade-up-out {
            0% { opacity: 0; transform: translateY(0) scale(0.9); }
            20% { opacity: 1; transform: translateY(-10px) scale(1); }
            80% { opacity: 1; transform: translateY(-10px) scale(1); }
            100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
        }
        .thought-popup {
            display: none; /* 初始隐藏 */
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 0.5rem;
            background-color: rgba(0,0,0,0.6);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            white-space: nowrap;
        }
        .thought-popup.show {
            display: block;
            animation: fade-up-out 2s forwards;
        }
        /* 卡片翻转样式 */
        .card-container {
            perspective: 1000px;
        }
        .card-flipper {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        .card-container.flipped .card-flipper {
            transform: rotateY(180deg);
        }
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .card-back {
            transform: rotateY(180deg);
        }
        /* 卡片滑动容器 */
        .card-carousel {
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
        }
        .card-slide {
            scroll-snap-align: center;
        }
    </style>
</head>
<body class="bg-gray-200 flex items-center justify-center min-h-screen p-4">

    <!-- 手机外壳 -->
    <div class="w-full max-w-sm h-[800px] bg-white rounded-3xl shadow-2xl border-4 border-gray-800 overflow-hidden flex flex-col">
        
        <!-- 状态栏 -->
        <div class="bg-white px-4 pt-2 flex justify-between items-center">
            <span class="text-sm font-semibold">12:40</span>
            <div class="flex items-center space-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M12 12h.01" /></svg>
                <span class="text-sm font-semibold">98%</span>
            </div>
        </div>

        <!-- App 内容区 -->
        <div id="app-container" class="flex-1 flex flex-col relative">
            <!-- 顶部导航 -->
            <header class="bg-white/80 backdrop-blur-sm shadow-sm z-10">
                <div class="flex justify-between items-center p-4">
                    <nav class="flex space-x-4 text-gray-500 font-medium">
                        <button id="tab-home" class="pb-1 flex items-center gap-1">🏠 首页</button>
                        <button id="tab-timeline" class="pb-1 flex items-center gap-1">📜 时光轴</button>
                        <button id="tab-days" class="pb-1 flex items-center gap-1">✨ 重要日子</button>
                    </nav>
                    <div class="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center text-xl shadow-inner">
                        👩‍❤️‍👨
                    </div>
                </div>
            </header>

            <!-- 页面容器 -->
            <main class="flex-1 overflow-y-auto no-scrollbar relative">
                <!-- 首页 (全新设计感) -->
                <div id="page-home" class="hidden bg-gray-50 min-h-full h-full flex flex-col items-center justify-center relative">
                    <div id="card-carousel" class="w-full flex overflow-x-auto no-scrollbar card-carousel">
                        <!-- 卡片将由JS动态生成 -->
                    </div>
                    <!-- 滑动箭头 -->
                    <button id="prev-card" class="absolute left-0 top-1/2 -translate-y-1/2 p-2 bg-white/50 rounded-full shadow-md m-2 hover:bg-white transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
                    </button>
                    <button id="next-card" class="absolute right-0 top-1/2 -translate-y-1/2 p-2 bg-white/50 rounded-full shadow-md m-2 hover:bg-white transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                    </button>
                </div>

                <!-- 时光轴 -->
                <div id="page-timeline" class="hidden bg-gray-50 p-4">
                     <div class="relative">
                        <div class="absolute left-4 top-0 h-full w-0.5 bg-pink-200"></div>
                        
                        <!-- 海边日落 -->
                        <div class="flex items-start mb-8">
                            <div class="z-10 bg-white border-2 border-pink-300 rounded-full w-8 h-8 flex items-center justify-center mr-4 shrink-0"><span class="text-xs font-bold text-pink-500">7/20</span></div>
                            <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
                                <div class="relative"><img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop" alt="海边的日落" class="w-full h-32 object-cover"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs font-bold px-2 py-1 rounded-full">+3</div></div>
                                <div class="p-4"><h3 class="font-bold text-gray-800">海边的日落</h3><p class="text-sm text-gray-500 mt-1">那天傍晚的风，和你的侧脸，都好温柔。</p><div class="flex items-center justify-between mt-3 text-xs text-gray-400"><span>发布人: 👩</span><span>心情: 😊</span></div></div>
                            </div>
                        </div>

                        <!-- 咖啡厅约会 -->
                        <div class="flex items-start mb-8">
                            <div class="z-10 bg-white border-2 border-pink-300 rounded-full w-8 h-8 flex items-center justify-center mr-4 shrink-0"><span class="text-xs font-bold text-pink-500">7/15</span></div>
                            <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
                                <div class="relative"><img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=600&h=400&fit=crop" alt="咖啡厅约会" class="w-full h-32 object-cover"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs font-bold px-2 py-1 rounded-full">+2</div></div>
                                <div class="p-4"><h3 class="font-bold text-gray-800">第一次约会</h3><p class="text-sm text-gray-500 mt-1">咖啡厅里的初次相遇，从那时起就知道你是对的人。</p><div class="flex items-center justify-between mt-3 text-xs text-gray-400"><span>发布人: 👨</span><span>心情: 🥰</span></div></div>
                            </div>
                        </div>

                        <!-- 公园散步 -->
                        <div class="flex items-start mb-8">
                            <div class="z-10 bg-white border-2 border-pink-300 rounded-full w-8 h-8 flex items-center justify-center mr-4 shrink-0"><span class="text-xs font-bold text-pink-500">7/10</span></div>
                            <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
                                <div class="relative"><img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop" alt="公园散步" class="w-full h-32 object-cover"></div>
                                <div class="p-4"><h3 class="font-bold text-gray-800">公园里的午后</h3><p class="text-sm text-gray-500 mt-1">阳光透过树叶洒在小径上，我们手牵手慢慢走着。</p><div class="flex items-center justify-between mt-3 text-xs text-gray-400"><span>发布人: 👩</span><span>心情: 😌</span></div></div>
                            </div>
                        </div>

                        <!-- 美食分享 -->
                        <div class="flex items-start mb-8">
                            <div class="z-10 bg-white border-2 border-pink-300 rounded-full w-8 h-8 flex items-center justify-center mr-4 shrink-0"><span class="text-xs font-bold text-pink-500">7/05</span></div>
                            <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
                                <div class="relative"><img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=600&h=400&fit=crop" alt="美食分享" class="w-full h-32 object-cover"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs font-bold px-2 py-1 rounded-full">+4</div></div>
                                <div class="p-4"><h3 class="font-bold text-gray-800">一起做晚餐</h3><p class="text-sm text-gray-500 mt-1">第一次一起下厨，虽然有点手忙脚乱，但很开心。</p><div class="flex items-center justify-between mt-3 text-xs text-gray-400"><span>发布人: 👨</span><span>心情: 😄</span></div></div>
                            </div>
                        </div>

                        <!-- 纯文本记录 -->
                        <div class="flex items-start mb-8">
                            <div class="z-10 bg-white border-2 border-pink-300 rounded-full w-8 h-8 flex items-center justify-center mr-4 shrink-0"><span class="text-xs font-bold text-pink-500">7/01</span></div>
                            <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
                                <div class="relative bg-gradient-to-br from-purple-50 to-pink-50 h-32 flex items-center justify-center">
                                    <div class="text-center p-4">
                                        <div class="text-2xl mb-2">📝</div>
                                        <p class="text-sm text-gray-600 font-medium">写给你的小诗</p>
                                        <p class="text-xs text-gray-500 mt-1">如果我是风，你就是那片云...</p>
                                    </div>
                                </div>
                                <div class="p-4"><h3 class="font-bold text-gray-800">写给你的小诗</h3><p class="text-sm text-gray-500 mt-1">用诗歌表达内心的爱意，每一句都是真心话。</p><div class="flex items-center justify-between mt-3 text-xs text-gray-400"><span>发布人: 👨</span><span>心情: 💕</span></div></div>
                            </div>
                        </div>

                        <!-- 电影院 -->
                        <div class="flex items-start mb-8">
                            <div class="z-10 bg-white border-2 border-pink-300 rounded-full w-8 h-8 flex items-center justify-center mr-4 shrink-0"><span class="text-xs font-bold text-pink-500">6/28</span></div>
                            <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
                                <div class="relative"><img src="https://images.unsplash.com/photo-1489185078527-623fcdc6a0f8?w=600&h=400&fit=crop" alt="电影院" class="w-full h-32 object-cover"></div>
                                <div class="p-4"><h3 class="font-bold text-gray-800">看电影的夜晚</h3><p class="text-sm text-gray-500 mt-1">一起看了一部浪漫电影，你说最美好的时光就是和我在一起。</p><div class="flex items-center justify-between mt-3 text-xs text-gray-400"><span>发布人: 👩</span><span>心情: 🎬</span></div></div>
                            </div>
                        </div>

                        <!-- 书店 -->
                        <div class="flex items-start mb-8">
                            <div class="z-10 bg-white border-2 border-pink-300 rounded-full w-8 h-8 flex items-center justify-center mr-4 shrink-0"><span class="text-xs font-bold text-pink-500">6/25</span></div>
                            <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
                                <div class="relative"><img src="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=600&h=400&fit=crop" alt="书店" class="w-full h-32 object-cover"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs font-bold px-2 py-1 rounded-full">+2</div></div>
                                <div class="p-4"><h3 class="font-bold text-gray-800">书店里的时光</h3><p class="text-sm text-gray-500 mt-1">在书店里待了一整个下午，你推荐的那本书真的很好看。</p><div class="flex items-center justify-between mt-3 text-xs text-gray-400"><span>发布人: 👨</span><span>心情: 📚</span></div></div>
                            </div>
                        </div>

                        <!-- 感悟记录 -->
                        <div class="flex items-start mb-8">
                            <div class="z-10 bg-white border-2 border-pink-300 rounded-full w-8 h-8 flex items-center justify-center mr-4 shrink-0"><span class="text-xs font-bold text-pink-500">6/20</span></div>
                            <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
                                <div class="relative bg-gradient-to-br from-blue-50 to-indigo-50 h-32 flex items-center justify-center">
                                    <div class="text-center p-4">
                                        <div class="text-2xl mb-2">💭</div>
                                        <p class="text-sm text-gray-600 font-medium">关于爱情的思考</p>
                                        <p class="text-xs text-gray-500 mt-1">爱情是什么？是早上醒来时看到你的笑脸...</p>
                                    </div>
                                </div>
                                <div class="p-4"><h3 class="font-bold text-gray-800">关于爱情的思考</h3><p class="text-sm text-gray-500 mt-1">对爱情的深度思考和感悟，记录内心最真实的想法。</p><div class="flex items-center justify-between mt-3 text-xs text-gray-400"><span>发布人: 👩</span><span>心情: 🤔</span></div></div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- 重要日子 (翻转卡片版) -->
                <div id="page-days" class="hidden bg-gray-50 min-h-full p-4">
                    <div class="grid grid-cols-2 gap-4">
                        <!-- 纪念日卡片 -->
                        <div class="card-container h-32">
                            <div class="card-flipper">
                                <div class="card-front bg-white rounded-3xl p-4 border border-gray-100 shadow-sm relative flex flex-col justify-between">
                                    <div>
                                        <p class="text-gray-600 text-sm">纪念日还有</p>
                                        <div class="flex items-end gap-1 mt-1">
                                            <p class="text-4xl font-bold text-pink-500">99</p>
                                            <p class="text-gray-800 font-medium pb-1">天</p>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-400">2025-10-31</p>
                                    <div class="absolute bottom-3 right-3 w-10 h-10">
                                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.897Z" fill="#F87171"/></svg>
                                    </div>
                                    <button class="flip-button absolute top-2 right-2 p-1 text-gray-400 hover:text-gray-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 20h5v-5M20 4h-5v5" /></svg>
                                    </button>
                                </div>
                                <div class="card-back bg-pink-100 rounded-3xl p-4 border border-gray-100 shadow-sm flex flex-col justify-center items-center text-center">
                                    <p class="text-pink-700 font-semibold">我们的第一个纪念日！</p>
                                    <p class="text-xs text-pink-500 mt-2">要好好庆祝哦~</p>
                                </div>
                            </div>
                        </div>

                        <!-- 生日卡片 -->
                        <div class="card-container h-32">
                            <div class="card-flipper">
                                <div class="card-front bg-white rounded-3xl p-4 border border-gray-100 shadow-sm relative flex flex-col justify-between">
                                    <div>
                                        <p class="text-gray-600 text-sm">你的生日还有</p>
                                        <div class="flex items-end gap-1 mt-1">
                                            <p class="text-4xl font-bold text-blue-500">29</p>
                                            <p class="text-gray-800 font-medium pb-1">天</p>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-400">2025-08-15</p>
                                    <div class="absolute bottom-3 right-3 text-2xl">🎂</div>
                                    <button class="flip-button absolute top-2 right-2 p-1 text-gray-400 hover:text-gray-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 20h5v-5M20 4h-5v5" /></svg>
                                    </button>
                                </div>
                                <div class="card-back bg-blue-100 rounded-3xl p-4 border border-gray-100 shadow-sm flex flex-col justify-center items-center text-center">
                                    <p class="text-blue-700 font-semibold">最重要的人的生日</p>
                                    <p class="text-xs text-blue-500 mt-2">准备惊喜礼物 🎁</p>
                                </div>
                            </div>
                        </div>

                        <!-- 情人节卡片 -->
                        <div class="card-container h-32">
                            <div class="card-flipper">
                                <div class="card-front bg-white rounded-3xl p-4 border border-gray-100 shadow-sm relative flex flex-col justify-between">
                                    <div>
                                        <p class="text-gray-600 text-sm">情人节还有</p>
                                        <div class="flex items-end gap-1 mt-1">
                                            <p class="text-4xl font-bold text-red-500">20</p>
                                            <p class="text-gray-800 font-medium pb-1">天</p>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-400">2025-02-14</p>
                                    <div class="absolute bottom-3 right-3 text-2xl">💝</div>
                                    <button class="flip-button absolute top-2 right-2 p-1 text-gray-400 hover:text-gray-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 20h5v-5M20 4h-5v5" /></svg>
                                    </button>
                                </div>
                                <div class="card-back bg-red-100 rounded-3xl p-4 border border-gray-100 shadow-sm flex flex-col justify-center items-center text-center">
                                    <p class="text-red-700 font-semibold">属于我们的浪漫节日</p>
                                    <p class="text-xs text-red-500 mt-2">准备浪漫约会 💕</p>
                                </div>
                            </div>
                        </div>

                        <!-- 我的生日卡片 -->
                        <div class="card-container h-32">
                            <div class="card-flipper">
                                <div class="card-front bg-white rounded-3xl p-4 border border-gray-100 shadow-sm relative flex flex-col justify-between">
                                    <div>
                                        <p class="text-gray-600 text-sm">我的生日还有</p>
                                        <div class="flex items-end gap-1 mt-1">
                                            <p class="text-4xl font-bold text-green-500">56</p>
                                            <p class="text-gray-800 font-medium pb-1">天</p>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-400">2025-03-22</p>
                                    <div class="absolute bottom-3 right-3 text-2xl">🎉</div>
                                    <button class="flip-button absolute top-2 right-2 p-1 text-gray-400 hover:text-gray-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 20h5v-5M20 4h-5v5" /></svg>
                                    </button>
                                </div>
                                <div class="card-back bg-green-100 rounded-3xl p-4 border border-gray-100 shadow-sm flex flex-col justify-center items-center text-center">
                                    <p class="text-green-700 font-semibold">希望和你一起度过</p>
                                    <p class="text-xs text-green-500 mt-2">最美好的生日愿望 🌟</p>
                                </div>
                            </div>
                        </div>

                        <!-- 七夕节卡片 -->
                        <div class="card-container h-32">
                            <div class="card-flipper">
                                <div class="card-front bg-white rounded-3xl p-4 border border-gray-100 shadow-sm relative flex flex-col justify-between">
                                    <div>
                                        <p class="text-gray-600 text-sm">七夕节还有</p>
                                        <div class="flex items-end gap-1 mt-1">
                                            <p class="text-4xl font-bold text-purple-500">180</p>
                                            <p class="text-gray-800 font-medium pb-1">天</p>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-400">2025-08-22</p>
                                    <div class="absolute bottom-3 right-3 text-2xl">🌟</div>
                                    <button class="flip-button absolute top-2 right-2 p-1 text-gray-400 hover:text-gray-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 20h5v-5M20 4h-5v5" /></svg>
                                    </button>
                                </div>
                                <div class="card-back bg-purple-100 rounded-3xl p-4 border border-gray-100 shadow-sm flex flex-col justify-center items-center text-center">
                                    <p class="text-purple-700 font-semibold">中国的情人节</p>
                                    <p class="text-xs text-purple-500 mt-2">牛郎织女的浪漫传说 ✨</p>
                                </div>
                            </div>
                        </div>

                        <!-- 第一次约会纪念 -->
                        <div class="card-container h-32">
                            <div class="card-flipper">
                                <div class="card-front bg-white rounded-3xl p-4 border border-gray-100 shadow-sm relative flex flex-col justify-between">
                                    <div>
                                        <p class="text-gray-600 text-sm">已过去</p>
                                        <div class="flex items-end gap-1 mt-1">
                                            <p class="text-4xl font-bold text-gray-500">218</p>
                                            <p class="text-gray-800 font-medium pb-1">天</p>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-400">2024-06-20</p>
                                    <div class="absolute bottom-3 right-3 text-2xl">☕</div>
                                    <button class="flip-button absolute top-2 right-2 p-1 text-gray-400 hover:text-gray-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 20h5v-5M20 4h-5v5" /></svg>
                                    </button>
                                </div>
                                <div class="card-back bg-orange-100 rounded-3xl p-4 border border-gray-100 shadow-sm flex flex-col justify-center items-center text-center">
                                    <p class="text-orange-700 font-semibold">第一次约会</p>
                                    <p class="text-xs text-orange-500 mt-2">咖啡厅里的美好回忆 💕</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            <!-- 添加按钮 (FAB) -->
            <button id="fab-add" class="hidden absolute bottom-6 right-6 bg-pink-500 text-white w-14 h-14 rounded-full flex items-center justify-center text-3xl font-light shadow-lg hover:bg-pink-600 transition-all transform hover:scale-110">
                +
            </button>
            <button id="fab-record" class="hidden absolute bottom-6 right-6 bg-pink-500 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-pink-600 transition-all transform hover:scale-110">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.5L14.732 3.732z" />
                </svg>
            </button>
        </div>
    </div>

    <script>
        // --- 数据 ---
        const dailyCardsData = [
            {
                greeting: "亲爱的，早上好！",
                bgImage: "https://placehold.co/600x400/a2d2ff/ffffff?text=Good+Morning",
                weatherIcon: '☀️',
                weatherText: "晴转多云",
                temp: "28",
                humidity: "75%",
                airQuality: "优",
                airIndex: "45",
                wind: "微风",
                daysTogether: 366,
                reminder: "👨的生日还有 29 天",
                quote: "今天也要开心呀！",
                herMood: '☀️',
                hisMood: '☁️',
            },
            {
                greeting: "晚上好呀！",
                bgImage: "https://placehold.co/600x400/03045e/ffffff?text=Good+Evening",
                weatherIcon: '🌙',
                weatherText: "多云",
                temp: "25",
                humidity: "80%",
                airQuality: "良",
                airIndex: "52",
                wind: "静风",
                daysTogether: 365,
                reminder: "我们的纪念日还有 99 天",
                quote: "与你在一起的每一天，都是我生命中最美好的日子。",
                herMood: '😊',
                hisMood: '🥰',
            },
        ];

        // --- 元素获取 ---
        const tabs = [
            { id: 'home', button: document.getElementById('tab-home'), page: document.getElementById('page-home') },
            { id: 'timeline', button: document.getElementById('tab-timeline'), page: document.getElementById('page-timeline') },
            { id: 'days', button: document.getElementById('tab-days'), page: document.getElementById('page-days') }
        ];
        const fabAddButton = document.getElementById('fab-add');
        const fabRecordButton = document.getElementById('fab-record');
        const carousel = document.getElementById('card-carousel');
        const prevButton = document.getElementById('prev-card');
        const nextButton = document.getElementById('next-card');

        // --- 函数 ---

        // 生成首页卡片
        function createDailyCard(cardData) {
            return `
                <div class="card-slide w-full flex-shrink-0 p-4">
                    <div class="bg-white rounded-3xl shadow-lg border border-gray-100 flex flex-col h-full overflow-hidden">
                        <!-- Top Visual Block -->
                        <div class="relative h-40 bg-cover bg-center text-white p-4 flex flex-col justify-between" style="background-image: url('${cardData.bgImage}')">
                            <div class="absolute inset-0 bg-black/20"></div>
                            <div class="relative z-10">
                                <h2 class="text-xl font-bold">${cardData.greeting}</h2>
                                <p class="text-sm">${new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' })}</p>
                            </div>
                            <div class="relative z-10 flex justify-between items-end">
                                <div class="flex items-center gap-2">
                                    <span class="text-5xl">${cardData.weatherIcon}</span>
                                    <div>
                                        <p class="text-4xl font-bold">${cardData.temp}°</p>
                                        <p class="text-sm">${cardData.weatherText}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Main Content -->
                        <div class="p-4 flex-grow">
                            <!-- Info Grid -->
                            <div class="grid grid-cols-2 gap-3 text-sm">
                                <div class="bg-gray-100 rounded-lg p-2 flex items-center gap-2"><span class="text-lg">💧</span><div><p class="font-semibold">湿度</p><p class="text-gray-600">${cardData.humidity}</p></div></div>
                                <div class="bg-gray-100 rounded-lg p-2 flex items-center gap-2"><span class="text-lg">🍃</span><div><p class="font-semibold">${cardData.airQuality} ${cardData.airIndex}</p><p class="text-gray-600">空气质量</p></div></div>
                                <div class="bg-gray-100 rounded-lg p-2 flex items-center gap-2"><span class="text-lg">💨</span><div><p class="font-semibold">风力</p><p class="text-gray-600">${cardData.wind}</p></div></div>
                                <div class="bg-gray-100 rounded-lg p-2 flex items-center gap-2"><span class="text-lg">🌡️</span><div><p class="font-semibold">温度</p><p class="text-gray-600">22° / 30°</p></div></div>
                            </div>

                            <!-- Love Area -->
                            <div class="mt-4 p-3 bg-pink-50 rounded-lg border-2 border-dashed border-pink-200 text-center">
                                <p class="text-pink-600"><span class="font-bold">我们相恋</span> <span class="text-lg font-bold text-pink-500">${cardData.daysTogether}</span> <span class="font-bold">天</span></p>
                                <p class="text-xs text-pink-500 mt-1">🎉 ${cardData.reminder}</p>
                            </div>
                             <div class="mt-3 text-center italic text-gray-500 text-sm">
                                <p>"${cardData.quote}"</p>
                            </div>
                        </div>
                        
                        <!-- Mood Footer -->
                        <div class="border-t border-gray-200 p-4 flex justify-between items-center">
                            <div class="flex items-center gap-3">
                                <p class="text-3xl">👩</p>
                                <div class="bg-yellow-100 text-yellow-500 rounded-full px-3 py-1 text-xl shadow">${cardData.herMood}</div>
                            </div>
                             <button class="center-heart-button relative p-2 rounded-full transform transition-transform duration-200 hover:scale-110 active:scale-95 focus:outline-none">
                                <span class="text-4xl text-pink-400 drop-shadow-md">❤️</span>
                                <div class="thought-popup">
                                    想你 +1 ❤️
                                </div>
                            </button>
                             <div class="flex items-center gap-3">
                                <div class="bg-blue-100 text-blue-400 rounded-full px-3 py-1 text-xl shadow">${cardData.hisMood}</div>
                                <p class="text-3xl">👨</p>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }
        
        // 渲染所有首页卡片
        function renderDailyCards() {
            carousel.innerHTML = dailyCardsData.map(createDailyCard).join('');
        }

        // 切换标签页
        function switchTab(selectedTabId) {
            tabs.forEach(tab => {
                const isSelected = tab.id === selectedTabId;
                tab.button.classList.toggle('tab-active', isSelected);
                tab.page.classList.toggle('hidden', !isSelected);
            });
            fabAddButton.classList.toggle('hidden', selectedTabId !== 'days');
            fabRecordButton.classList.toggle('hidden', selectedTabId !== 'home');
        }

        // --- 事件监听 ---
        tabs.forEach(tab => {
            tab.button.addEventListener('click', () => switchTab(tab.id));
        });

        // 心动按钮事件 (需要事件委托)
        document.addEventListener('click', function(event) {
            const heartButton = event.target.closest('.center-heart-button');
            if (heartButton) {
                const heartIcon = heartButton.querySelector('span');
                const thoughtPopup = heartButton.querySelector('.thought-popup');
                if (heartIcon.classList.contains('heartbeat-animation')) {
                    return;
                }
                heartIcon.classList.add('heartbeat-animation');
                thoughtPopup.classList.add('show');
                setTimeout(() => {
                    heartIcon.classList.remove('heartbeat-animation');
                }, 400);
                setTimeout(() => {
                    thoughtPopup.classList.remove('show');
                }, 2000);
            }
        });

        // 卡片翻转逻辑
        document.addEventListener('click', function(event) {
            const flipButton = event.target.closest('.flip-button');
             if (flipButton) {
                event.stopPropagation(); 
                const cardContainer = flipButton.closest('.card-container');
                if (cardContainer) {
                    cardContainer.classList.toggle('flipped');
                }
            }
        });

        // 首页卡片滑动按钮
        prevButton.addEventListener('click', () => {
            carousel.scrollBy({ left: -carousel.offsetWidth, behavior: 'smooth' });
        });

        nextButton.addEventListener('click', () => {
            carousel.scrollBy({ left: carousel.offsetWidth, behavior: 'smooth' });
        });

        // --- 初始化 ---
        renderDailyCards();
        switchTab('home');
    </script>

</body>
</html>
